<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>咏杰回忆录</title>
    <meta name="Keywords" content="回忆">
    <meta name="Description" content="私人空间">
    <link href="../css/index.css" rel="stylesheet">
    <!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>

<body id="index">
<div>
    <style type="text/css">
        #imgLogo {
            position: absolute;
            top: 19px;
            left: 12px;
            width: 208px;
            height: 44px
        }

        #flashLogo {
            position: absolute;
            top: 0;
            left: 0;
            width: 248px;
            height: 70px
        }

        #flashLogo .bakLogo {
            display: block;
            width: 248px;
            height: 70px
        }

        #flashLogo .link {
            z-index: 2;
            display: block;
            position: absolute;
            width: 248px;
            height: 70px;
            background-image: url(about:blank)
        }

        .ie6 #imgLogo img {
            display: none
        }

        .ie6 #imgLogo {
            background-image: none;
            filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='https://p1.ssl.qhimg.com/t0151320b1d0fc50be8.png', sizingMethod='image')
        }

        #themeLogo {
            position: absolute;
            top: 19px;
            left: 12px;
            width: 208px;
            height: 44px
        }

        .ie6 #themeLogo {
            background-image: none
        }

        .default-logo,
        .theme-logo {
            display: block;
        }

        #imgLogo.valentine-logo {
            top: 0;
            left: 0;
            width: 248px;
            height: 70px
        }

        .item-logo .replay {
            position: absolute;
            display: block;
            top: 0;
            right: 26px;
            width: 40px;
            height: 26px;
            z-index: 1000;
            font-size: 20px;
            overflow: hidden;
            opacity: 0;
            filter: Alpha(opacity=0);
            cursor: pointer
        }

        #valentine {
            display:block;
            z-index: 100;
            position: fixed;
            width: 600px;
            height: 0;
            top: 0;
            left: 50%;
            margin-left: -300px
        }

        @keyframes shake {
            from {
                transform: rotate(30deg)
            }
            to {
                transform: rotate(-30deg)
            }
        }

        #valentine .shake {
            width: 240px;
            height: 0;
            position: absolute;
            z-index: 20;
            top: 0;
            left: 180px;
            animation-name: shake;
            animation-duration: 2.5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(.6, 0, .3, 1);
            animation-direction: alternate;
            transform-origin: top center
        }

        #valentine .shake .rope {
            position: absolute;
            width: 2px;
            left: 119px;
            top: -10px;
            background-color: #FF2128;
            box-shadow: rgba(255, 33, 40, .2) -7px 0 6px
        }

        #valentine .shake .heart-wrap {
            position: absolute;
            width: 240px;
            height: 220px
        }

        #valentine .heart-wrap .heart {
            display: block;
            position: relative;
            width: 240px;
            height: 220px
        }

        @keyframes beat {
            0% {
                transform: scale(0);
                opacity: 1
            }
            40% {
                opacity: .8
            }
            80% {
                transform: scale(1);
                opacity: .6
            }
            100% {
                transform: scale(1);
                opacity: 0
            }
        }

        #valentine .heart-wrap .beat {
            position: absolute;
            top: 38px;
            left: 153px;
            animation-name: beat;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;
            transform-origin: bottom center
        }

        #valentine .tiny {
            position: relative;
            width: 0;
            height: 0;
            top: 0;
            left: 300px;
            z-index: 1;
            user-select: none
        }

        #valentine .tiny img {
            position: absolute
        }

        #valentine .control {
            position: absolute;
            right: -100px;
            top: 263px;
            height: 36px;
            width: 96px
        }

        #valentine .countdown {
            float: right;
            margin: 6px 0 6px -10px;
            background: #888;
            height: 24px;
            line-height: 24px;
            border-radius: 0 12px 12px 0;
            width: 50px;
            padding: 0 7px 0 13px;
            color: #FFF
        }

        #valentine .close {
            width: 36px;
            height: 36px;
            background: #888;
            border-radius: 50%;
            text-align: center;
            line-height: 36px;
            color: #FFF;
            font-size: 32px;
            font-family: "Times New Roman";
            cursor: pointer;
            text-decoration: none;
            float: left
        }

        #valentine .close:hover {
            background: #666
        }
    </style>
    <div id="valentine" ><div class="shake"><div class="rope" style="height: 300px;"></div><a href="" class="heart-wrap" style="top: 240px;">
        <img src="../images/sgd.png" class="heart"><img src="https://p.ssl.qhimg.com/t016d4fc7667d17d5bf.png" class="beat"></a></div><div class="tiny"></div></div>

    <script type="javascript">
        (function() {
            function i(e, t, n) {
                this.container = n, this.init(e, t)
            }
            var e = 6,
                t = function(e) {
                    return e ? Math.floor(e) + "px" : 0
                },
                n = function(e) {
                    if (!window.getComputedStyle) return 0;
                    var t = window.getComputedStyle(e),
                        n = t.getPropertyValue("transform");
                    if (!n.match("matrix")) return 0;
                    var r = n.match(/-?0(\.[0-9]*[1-9])?/ig).map(function(e) {
                        return parseFloat(e, 10)
                    });
                    return -Math.asin(r[1])
                },
                r = function(e, t) {
                    return e && "number" == typeof e.length ? e[Math.floor(Math.random() * e.length)] : ("number" != typeof t && (t = e || 1, e = 0), e + Math.random() * (t - e))
                };
            i.STYLES = ["t01dc2e861029c8a8ca", "t016cc24a48997d651a", "t01dd2a63c80cbdbc30"], i.prototype = {
                init: function(e, t) {
                    this.alive = !0, this.scale = r(.3, .7), this.opacity = r(50, 70) / 100, this.style = r(i.STYLES);
                    var n = r(Math.PI * 2);
                    this.x = e + Math.sin(n) * 80 - this.scale * 48 / 2, this.y = t + Math.cos(n) * 80 - this.scale * 42 / 2, this.theta = r(Math.PI * 2), this.drag = r(.9, .99), this.wander = r(.5, 2), this.force = r(.1, .4), this.vx = Math.sin(this.theta) * this.force, this.vy = Math.cos(this.theta) * this.force, this.draw()
                },
                move: function() {
                    this.x += this.vx, this.y += this.vy, this.vx *= this.drag, this.vy *= this.drag, this.theta += r(-0.5, .5) * this.wander, this.vx += Math.sin(this.theta) * .1, this.vy += Math.cos(this.theta) * .1, this.scale *= .995, this.opacity *= .96, this.alive = this.opacity > .1, this.draw()
                },
                draw: function() {
                    var e = this.img;
                    e || (e = document.createElement("img"), e.src = "https://p.ssl.qhimg.com/" + this.style + ".png", this.container.appendChild(e), this.img = e), e.style.left = t(this.x), e.style.top = t(this.y), e.style.width = t(this.scale * 48), e.style.height = t(this.scale * 42), e.style.opacity = this.opacity
                },
                destory: function() {
                    this.img && this.container.removeChild(this.img)
                }
            };
            var s = {
                    MAX_PARTICLES: 500,
                    pool: [],
                    start: function(e, t, r) {
                        s.ropeH = e, s.container = t, s.timer = setInterval(function() {
                            s.spawn(n(r)), s.update()
                        }, 50)
                    },
                    spawn: function(e) {
                        if (s.pool.length >= s.MAX_PARTICLES) return;
                        var t = Math.sin(e) * (s.ropeH + 40),
                            n = Math.cos(e) * (s.ropeH + 40) + 20;
                        heart = new i(t, n, s.container), s.pool.push(heart)
                    },
                    update: function() {
                        s.pool.forEach(function(e, t) {
                            e.alive ? e.move() : (e.destory(), s.pool.splice(t, 1))
                        })
                    },
                    stop: function() {
                        clearInterval(s.timer), s.pool.forEach(function(e) {
                            e.destory()
                        }), s.pool = []
                    }
                },
                o = '<div id="valentine"><div class="shake"><div class="rope"></div><a href="http://yule.360.cn/zt/wangwangwang.html" class="heart-wrap"><img src="https://p.ssl.qhimg.com/t015d1b94b34633c54d.png" class="heart"><img src="https://p.ssl.qhimg.com/t016d4fc7667d17d5bf.png" class="beat"></a></div><div class="tiny"></div><div class="control"><div class="countdown">\u5269\u4f59<em class="time">10</em>\u79d2</div><div class="close">&times;</div></div></div>',
                u = '#valentine{display:none;z-index:100;position:fixed;width:600px;height:0;top:0;left:50%;margin-left:-300px}@keyframes shake{from{transform:rotate(30deg)}to{transform:rotate(-30deg)}}#valentine .shake{width:240px;height:0;position:absolute;z-index:20;top:0;left:180px;animation-name:shake;animation-duration:2.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.6,0,.3,1);animation-direction:alternate;transform-origin:top center}#valentine .shake .rope{position:absolute;width:2px;left:119px;top:-10px;background-color:#FF2128;box-shadow:rgba(255,33,40,.2) -7px 0 6px}#valentine .shake .heart-wrap{position:absolute;width:240px;height:220px}#valentine .heart-wrap .heart{display:block;position:relative;width:240px;height:220px}@keyframes beat{0%{transform:scale(0);opacity:1}40%{opacity:.8}80%{transform:scale(1);opacity:.6}100%{transform:scale(1);opacity:0}}#valentine .heart-wrap .beat{position:absolute;top:38px;left:153px;animation-name:beat;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:ease-out;transform-origin:bottom center}#valentine .tiny{position:relative;width:0;height:0;top:0;left:300px;z-index:1;user-select:none}#valentine .tiny img{position:absolute}#valentine .control{position:absolute;right:-100px;top:263px;height:36px;width:96px}#valentine .countdown{float:right;margin:6px 0 6px -10px;background:#888;height:24px;line-height:24px;border-radius:0 12px 12px 0;width:50px;padding:0 7px 0 13px;color:#FFF}#valentine .close{width:36px;height:36px;background:#888;border-radius:50%;text-align:center;line-height:36px;color:#FFF;font-size:32px;font-family:"Times New Roman";cursor:pointer;text-decoration:none;float:left}#valentine .close:hover{background:#666}',
                a = Math.max(Dom.getDocRect().height / 2, 300),
                f = null,
                l = null,
                c = null,
                h = null,
                p = {
                    el: W("#imgLogo"),
                    init: function() {
                        var t = p.el.parentNode(".item-logo");
                        t.query(".replay").length || t.appendChild('<span class="replay"></span>'), p.el.attr("href", "http://yule.360.cn/zt/wangwangwang.html"), p.el.attr("target", "_blank"), p.el.removeAttr("data-themeKey"), t.query(".replay").on("click", function(e) {
                            e.preventDefault();
                            if (hao360.themeData[0] !== "default" || h) return;
                            LogHub.behavior("valentine", "replay"), v()
                        }), p.preload()
                    },
                    preload: function() {
                        var t = p.el.query("img").attr("data-src"),
                            n = new Image;
                        t && (n.src = t)
                    },
                    show: function() {
                        var t = "https://p.ssl.qhimg.com/t018cb056a766b58183.png";
                        p.el.addClass("valentine-logo"), p.el.query("img").attr("src", t)
                    },
                    hide: function() {
                        p.el.removeClass("valentine-logo");
                        var t = p.el.query("img").attr("data-src");
                        t && p.el.query("img").attr("src", t)
                    }
                },
                d = function() {
                    W("#doc-view-front").appendChild(o), qboot.load.css(u), f = W("#valentine"), l = f.query(".tiny"), c = f.query(".shake"), c.query(".rope").css({
                        height: a + "px"
                    }), c.query(".heart-wrap").css({
                        top: a - 60 + "px"
                    });
                    var e = function() {
                        f.query(".close").on("click", function(e) {
                            e.preventDefault(), LogHub.behavior("valentine", "close"), m()
                        })
                    };
                    e()
                },
                v = function() {
                    if (h) return;
                    s.start(a, l[0], c[0]), p.hide(), f.show(), LogHub.behavior("valentine", "show");
                    var t = e;
                    f.query(".countdown em").html(t), h = setInterval(function() {
                        t--, f.query(".countdown em").html(t), t <= 0 && (m(), clearInterval(h), h = null)
                    }, 1e3)
                },
                m = function() {
                    s.stop(), W("#valentine").hide(), p.show(), h && (clearInterval(h), h = null)
                };
            if (!VALENTINE_TIME) return;
            if (hao360.todayObj < new Date(VALENTINE_TIME.start) || hao360.todayObj > new Date(VALENTINE_TIME.end)) return;
            d(), p.init(), qboot.cookie.get("valentine-showed") || (v(), qboot.cookie.set("valentine-showed", 1, {
                expires: 864e5
            }))
        })();
    </script>
    <header>
        <div class="quotes">
            <p>初遇时，她的微笑，深深的情、傻劲，永恒的承诺，两个人共度的美丽时刻，一一印在回忆里，一直留恋着她那微微一笑，舍不得离开。</p>
            <div class="text5">记录·回忆</div>
            <div class="flower"><img src="../images/flower.jpg"></div>
        </div>
        <!--nav begin-->
        <div id="nav">
            <ul>
                <li><a href="./page1.html">首页</a></li>
                <li><a href="./page3.html">碎言碎语</a></li>
                <li><a href="./page4.html">生活</a></li>
            </ul>
        </div>
        <!--nav end-->
    </header>
    <div class="photowall">
        <ul class="wall_a">
            <li><a href="#"><img src="../images/p1.jpg">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
            <li><a href="#"><img src="../images/p2.JPG">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
            <li><a href="#"><img src="../images/p3.JPG">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
            <li>
                <p class="text_a"><a href="#">一个人最好的模样大概是平静一点，坦然接受自己所有的弱点，不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏......</a></p>
            </li>
            <li><a href="#"><img src="../images/p4.JPG">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
            <li>
                <p class="text_b"><a href="#">逃避自己的人，最终只能导致自己世界的崩塌，而变得越来越没有安全感。</a></p>
            </li>
            <li><a href="#"><img src="../images/p5.JPG">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
            <li><a href="#"><img src="../images/p6.JPG">
      <figcaption>
        <h2>不再因为别人过得好而焦虑，在没有人看得到你的时候依旧能保持节奏 </h2>
      </figcaption>
      </a></li>
        </ul>
    </div>
    <div class="about">
        <ul>
            <div id="fountainG">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </div>
            <div class="about_girl"><span><a href="#"><img src="../images/girl.JPG"></a></span>
                <p>初遇时，他的幽默，他往日的深情、承诺和傻劲儿，两个人共度的美丽时刻，一一印在我的回忆里....</p>
            </div>
            <div class="about_boy"><span><a href="#"><img src="../images/boy.JPG"></a></span>
                <p>初遇时，她的热情，她腼腆的微笑、可爱和气质，两个人共度的愉快时刻，一一印在我的回忆里...</p>
            </div>
        </ul>
    </div>
    <div class="blank"></div>
    <div class="blog">
        <figure> <a href="#"><img src="../images/s1.JPG"></a>
            <p><a href="#">愿有人陪你一起颠沛流离</a></p>
            <figcaption>有一天晚上我收到朋友的邮件，他问我怎样可以最快地摆脱寂寞，我想了想不知道应该怎么回答他，因为我从来没有摆脱过这个问题，我只能去习惯它，就像习惯身体的一部分。</figcaption>
        </figure>
        <figure> <a href="/"><img src="../images/s2.JPG"></a>
            <p><a href="#">你要去相信，没有到不了的明天</a></p>
            <figcaption>不管你现在是一个人走在异乡的街道上始终没有找到一丝归属感，还是你在跟朋友们一起吃饭开心地笑着的时候闪过一丝落寞。</figcaption>
        </figure>
        <figure> <a href="#"><img src="../images/s3.jpg"></a>
            <p><a href="#">美丽的茧</a></p>
            <figcaption>让世界拥有它的脚步，让我保有我的茧。当溃烂已极的心灵再不想做一丝一毫的思索时，就让我静静回到我的茧内，以回忆为睡榻，以悲哀为覆被，这是我唯一的美丽。</figcaption>
        </figure>
    </div>
    <div class="blank"></div>
    <div class="text6">相守·祝福</div>
    <div class="hope">
        <ul>
            <div class="visitors">
                <dl>
                    <dt><img src="../images/a1.jpg"> </dt>
                    <dd><a href="#">喵咪xx</a> </dd>
                    <dd>你们本就是天生一对，地造一双，而今共偕连理，今后更需彼此宽容、互相照顾，祝福你们！</dd>
                </dl>
                <dl>
                    <dt><img src="../images/a2.jpg"> </dt>
                    <dd><a href="#">Shao</a> </dd>
                    <dd>十年修得同船渡，百年修得共枕眠。于茫茫人海中找到她，分明是千年前的一段缘，祝你俩幸福美满，共谐连理。</dd>
                </dl>
                <dl>
                    <dt><img src="../images/a3.jpg"> </dt>
                    <dd><a href="#">菲菲</a> </dd>
                    <dd>托清风捎去衷心的祝福，让流云奉上真挚的情意；今夕何夕，空气里都充满了醉人的甜蜜。谨祝我最亲爱的朋友，从今后，爱河永浴！</dd>
                </dl>
            </div>
        </ul>
    </div>
    <footer>
        <p>咏与杰的空间</a></p>
    </footer>
</div>
</body>

</html>